import classnames from 'classnames'
import React, { useEffect, useRef } from 'react'
import styles from './index.module.scss'
const Input = ({ className, extra, onExtraClick, autoFocus, ...rest }) => {
  // focus
  const inputRef = useRef(null)
  useEffect(() => {
    if (autoFocus) {
      inputRef.current.focus()
    }
  }, [autoFocus])
  return (
    <div className={classnames(styles.root, className)}>
      {/* 左侧：input 标签 */}
      <input className="input" {...rest} ref={inputRef} />
      {/* 右侧：额外内容 */}
      {extra && (
        <div className="extra" onClick={onExtraClick}>
          {extra}
        </div>
      )}
    </div>
  )
}

export default Input
